﻿@model HelloMVC.Model.TaskboardData
@{
    ViewBag.Title = "Task Board";
}

@section headerstyle
{
    <link href="@Url.Content("~/Content/themes/dashboard/agile.css")" rel="stylesheet" type="text/css" />
    <script type="text/javascript">    
        var dropdownable = new Array();
        var aodroppable = new Array();
        var aodraggable = new Array();
    </script>
}

@section footjs
{
    <script src="@Url.Content("~/Scripts/jquery.ui.core.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.widget.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.button.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.position.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.mouse.js")" type="text/javascript"></script>   
    <script src="@Url.Content("~/Scripts/jquery.ui.draggable.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.droppable.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.resizable.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.dialog.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/custom.gp-helper.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.tooltip.js")" type="text/javascript"></script>
    <script type="text/javascript">
        function OpenDialog() {
            $('#dialog').dialog('open');
        }

        $(document).ready(function () {
            $(".ag-issue").click(function () {
                $(".ag-issue.ag-select").removeClass("ag-select");
                $(this).addClass("ag-select");
            });

            $(window).resize(function () {
                resetCardWidth();
            });

            resetCardWidth();
            InitDraggable(aodraggable);
            InitDroppable(aodroppable);
            InitDropdown(dropdownable);
            $('#tooltip2, #tooltip3').tooltip({ position: ['bottom', 'right'], offset: [10, 0], superPos: [0, 15] });
            $('#dialog').dialog({
                modal: true,
                draggable: false,
                autoOpen: false,
                resizable: false,
                width: 800,
                height: 500,
                buttons: [
                    { text: 'Create', click: function () { }
                    },
                    { text: 'Create and Close', click: function () {
                        $(this).dialog('close');
                    }
                    }],
                title: 'New Bug'
            });
        });
    </script>
}

<div id="dialog" style="display:none;">
   @using (Html.BeginForm("", "", FormMethod.Post, new {@class="aui"}))
   {
        @Html.Partial("~/Areas/DashBoard/Views/Issue/IssueContent.cshtml", new HelloMVC.Model.Issue())
   }
</div>

<div id="ag" class="ag-board-task ag-board-task-outline ag-has-pagination ag-adv-list-alt">
    <style id="js-cardwidth" type="text/css">#ag.ag-board-task .ag-cards .ag-issue{width: 100px;}</style>
    @Html.Partial("~/Areas/DashBoard/Views/Agile/BoardStalker.cshtml", Model)
    <div id="ag-content">
        <div id="ag-content-inner">
            <div class="command-bar">
                <div class="ops-cont">
                    <div id="ag-button-bar" class="ag-button-bar">
                        <ul class="ag-board-controls ops">
                            <li>
                                <a class="button first" title="Collapse all">
                                    <span class="ag-icon ag-icon-collapse"></span>
                                </a>
                            </li>
                            <li>
                                <a class="button last" title="Expand all">
                                    <span class="ag-icon ag-icon-expand"></span>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div id="ag-mod-bar">
                        <form id="ag-mods" accept-charset="utf-8" method="get" action="submit">
                            <ul class="ag-mods-bar ops">
                                <li>
                                    <a id="hide-done" class="button first last">Hide Done Issues</a>
                                </li>
                            </ul>
                        </form>
                        <div class="ag-search">
                            <input id="searchIn" type="text" />
                            <span class="ag-icon ag-icon-search"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div id="pBar">                    
                <div class="ag-progress ">
                    <ul class="ag-bargraph ag-link">
                        <li class="ag-bar-todo" style="width:50%;"></li>
                        <li class="ag-bar-prog" style="width:30%;"></li>
                        <li class="ag-bar-done" style="width:20%;"></li>
                    </ul>
                 </div>
            </div>
            <div id="ag-issues" class="ag-steps-3">
                <div id="ag-step-head">
                    <div class="ag-step-col">
                        <div class="ag-step-header">
                            <h3>To Do<span> - 478h</span></h3>
                        </div>
                    </div>
                    <div class="ag-step-col">
                        <div class="ag-step-header">
                            <h3>In Progress<span> - 0h</span></h3>
                        </div>
                    </div>
                    <div class="ag-step-col">
                        <div class="ag-step-header">
                            <h3>Done<span> - 82h</span></h3>
                        </div>
                    </div>
                </div>
                @Html.DisplayFor(m => m.StepFamilies)
                <div id="ag-step-others" class="ag-step-orphans">
                    @Html.Partial("~/Areas/DashBoard/Views/Agile/OthersIssue.cshtml", Model.OthersIssue)
                </div>
            </div>
            <div id="ag-paginate" class="ag-pagination ops">
                <ul id="ag-pagines">
                    <li id="Page_-1-0">
                        <a id="tooltip1" class="button first" title="page 1 - 5">1</a>
                    </li>
                    <li id="Page_-1-5" >
                        <a id="tooltip2" class="button" href="@Url.Action("TaskboardPreview", "Agile")">2</a>
                    </li>
                    <li id="Page_-1-10">
                        <a id="tooltip3" class="button last" href="@Url.Action("TaskboardPreview", "Agile")">3</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>